import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Select, DatePicker, Button, Upload } from 'antd'
import _ from 'loadsh'
import moment from 'moment'
import { UploadOutlined } from '@ant-design/icons'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import ClaimBlock from './components/ClaimBlock'
import { getUploadProps } from '@js/tool'

const { Item } = Form
const { Option } = Select
// const { TextArea } = Input

export default class StepOneInput extends Component {
  state = {
    keyTitleMap: {},
    keyMap: {},
    fileList: [],
    claim: {}
  }

  initKeyMap () {
    const map = {}
    const vMap = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
      vMap[li.key] = li
    })
    this.setState({
      keyTitleMap: map,
      keyMap: vMap
    })
  }

  // 设置id值
  changeParty (v, key, optionsList = []) {
    const c = this.props.formRef.current
    const result = []
    optionsList.forEach(li => {
      if (v.indexOf(li.name) !== -1) {
        result.push(li.id)
      }
    })
    c.setFieldsValue({ [key]: result })
  }

  // 改变原请求
  changeClaim (id) {
    const { claimList } = this.props
    const ids = claimList.map(li => li.id)
    const index = ids.indexOf(id)
    if (index !== -1) {
      this.setState({
        claim: claimList[index]
      })
    }
  }

  // 初始化仲裁请求
  initClaim () {
    const { instance } = this.props
    const { currentStep } = instance
    const claim = currentStep.claim
    this.setState({ claim })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyMap()
      this.initClaim()
    }
  }

  componentDidMount () {
    this.initKeyMap()
    this.initClaim()
  }

  // 渲染原仲裁请求选择器
  renderClaimSelector () {
    const { keyTitleMap } = this.state
    const preKey = this.props.preKey
    const key = `${preKey}_claimpid`
    if (preKey !== 'cclaimamend') {
      return null
    }
    return (
      <>
        <Cell>
          <Item labelCol={{ flex: '120px' }} name={key} label={keyTitleMap[key]} rules={[{ required: true, message: `${keyTitleMap[key]}不能为空` }]}>
            <Select placeholder={`请选择${keyTitleMap[key]}`} onChange={(id) => this.changeClaim(id)}>
              {this.props.claimList.map((li, i) => {
                return (
                  <Option key={i} value={li.id}>{`${li.submittal} - ${moment(li.accept_datetime * 1000).format('YYYY-MM-DD HH:mm')}`}</Option>
                )
              })}
            </Select>
          </Item>
        </Cell>
        <Split />
      </>
    )
  }

  // 渲染变更类型
  renderType () {
    const { keyTitleMap, keyMap } = this.state
    const preKey = this.props.preKey
    const key = `${preKey}_amend_type`
    if (!this.props.isChange) {
      return null
    }
    const list = (keyMap[key] || { options: [] }).options
    return (
      <Cell>
        <Item labelCol={{ flex: '120px' }} name={key} label={keyTitleMap[key]} rules={[{ required: true, message: `${keyTitleMap[key]}不能为空` }]}>
          <Select placeholder={`请选择${keyTitleMap[key]}`}>
            {list.map((li, i) => {
              return (
                <Option key={i} value={li.value}>{li.title}</Option>
              )
            })}
          </Select>
        </Item>
      </Cell>
    )
  }

  render () {
    const { keyTitleMap } = this.state
    const partyList = this.props.partys
    const preKey = this.props.preKey
    return (
      <div>
        <Line>
          <Cell>
            <Item noStyle name={`${preKey}_submittalid`}><span /></Item>
            <Item labelCol={{ flex: '120px' }} name={`${preKey}_submittal`} label={keyTitleMap[`${preKey}_submittal`]} rules={[{ required: true, message: `${keyTitleMap[`${preKey}_submittal`]}不能为空` }]}>
              <Select placeholder={`请选择${keyTitleMap[`${preKey}_submittal`]}`} mode='multiple' onChange={v => this.changeParty(v, `${preKey}_submittalid`, partyList)}>
                {partyList.map((li, i) => <Option key={i} value={li.name}>{li.name}</Option>)}
              </Select>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '120px' }} name={`${preKey}_create_datetime`} label={keyTitleMap[`${preKey}_create_datetime`]} rules={[{ required: true, message: `${keyTitleMap[`${preKey}_create_datetime`]}不能为空` }]}>
              <DatePicker placeholder={`请选择${keyTitleMap[`${preKey}_create_datetime`]}`} style={{ width: '100%' }} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item
              labelCol={{ flex: '120px' }} name='file' label={keyTitleMap[`${preKey}_fileid`]}
            >
              <Upload {...getUploadProps.call(this, this.props.formRef)}>
                <Button disabled={this.state.fileList.length !== 0}>
                  <UploadOutlined /> 上传文件
                </Button>
              </Upload>
            </Item>
          </Cell>
        </Line>
        <Line>
          {this.renderClaimSelector()}
          {this.renderType()}
        </Line>
        <ClaimBlock formRef={this.props.formRef} name={`${preKey}_claim`} label={keyTitleMap[`${preKey}_claim`]} claim={this.state.claim} />
        {/* <Line>
          <Cell style={{ width: '65%' }}>
            <Item labelCol={{ flex: '120px' }} name={['vars', `${preKey}_statement`]} label={keyTitleMap[`${preKey}_statement`]}>
              <TextArea placeholder={`请输入${keyTitleMap[`${preKey}_statement`]}`} row={2} />
            </Item>
          </Cell>
        </Line> */}
      </div>
    )
  }
}

StepOneInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object,
  preKey: PropTypes.string,
  isChange: PropTypes.bool,
  claim: PropTypes.object,
  claimList: PropTypes.array,
  partys: PropTypes.array
}

StepOneInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {},
  preKey: '',
  isChange: false, // 是否为变更
  claim: {},
  claimList: [],
  partys: []
}
